<!-- 内容处顶部导航 -->
<template>
    <div>
        <ul class="nav-list">
            <li class="nav-item">
                <a href="#" class="item">
                    <div class="item-left">
                        <h4 class="item-left-title">自由行</h4>
                        <span class="item-left-sub">旅行就要更自在</span>
                    </div>
                    <span class="item-right">
                        <img src="@/assets/1.png" width="40px" height="40px">
                    </span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="item">
                    <div class="item-left">
                        <h4 class="item-left-title">跟团游</h4>
                        <span class="item-left-sub">行程透明省心游</span>
                    </div>
                    <span class="item-right">
                        <img src="@/assets/2.png" width="40px" height="40px">
                    </span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="item">
                    <div class="item-left">
                        <h4 class="item-left-title">当地游</h4>
                        <span class="item-left-sub">最地道的玩法体验</span>
                    </div>
                    <span class="item-right">
                        <img src="@/assets/3.png" width="40px" height="40px">
                    </span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="item">
                    <div class="item-left">
                        <h4 class="item-left-title">机票</h4>
                        <span class="item-left-sub">特惠一折起</span>
                    </div>
                    <span class="item-right">
                        <img src="@/assets/4.png" width="40px" height="40px">
                    </span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="item">
                    <div class="item-left">
                        <h4 class="item-left-title">订酒店</h4>
                        <span class="item-left-sub">一键全网比价</span>
                    </div>
                    <span class="item-right">
                        <img src="@/assets/5.png" width="40px" height="40px">
                    </span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="item">
                    <div class="item-left">
                        <h4 class="item-left-title">签 证</h4>
                        <span class="item-left-sub">出签率高服务佳</span>
                    </div>
                    <span class="item-right">
                        <img src="@/assets/6.png" width="40px" height="40px">
                    </span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="item">
                    <div class="item-left">
                        <h4 class="item-left-title">邮 轮</h4>
                        <span class="item-left-sub">移动的海上堡垒</span>
                    </div>
                    <span class="item-right">
                        <img src="@/assets/7.png" width="40px" height="40px">
                    </span>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data () {
        return {

        };
    },

    components: {},

    methods: {}
}

</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
    .nav-list
        display flex
        .nav-item
            margin 0 5px
            .item
                display flex
                border 1px solid #e5e5e5
                padding 10px 0 10px 10px
                border-radius 3px
                background-color transparent
                position relative
                // width 140px
                &:hover
                    background-color #ffffff
                    box-shadow 0 0 5px 5px #eee
                    &:before
                        content:''
                        position absolute
                        width 28%
                        height 8px
                        border-radius 50%
                        background-color yellow  
                        z-index 1
                        top 27px
                .item-left
                    display flex
                    flex-direction column
                    justify-content center
                    .item-left-title
                        color #333
                        font-size 16px
                        z-index 1
                    .item-left-sub
                        color #9d9d9d
                        font-size 12px
                        margin-top 3px
                        z-index 1
                
</style>